<!DOCTYPE html>
<html>
<head>
<!-- vuetify -->
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <title>MyPetstoreForMerchant</title>
</head>
<body>
  <div id="app">
    <template>
      <v-app>
        <!-- 导航栏 -->
        <v-app-bar app color="primary" dark>
          <v-app-bar-nav-icon @click="toggleDrawer"></v-app-bar-nav-icon>
          <v-toolbar-title>商家管理系统</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon
          @click="helpDialog = true">
            <v-icon
            
            >mdi-help-box</v-icon>
          </v-btn>
          
        </v-app-bar>
    
        <!-- 主体内容 -->
        <v-main>
            <template>
                <v-parallax src="images/background.png"  height="700"
                >
                <template><!--登录按钮-->
                  <v-row no-gutters>
                    <v-col
                    offset-md="8"
                      cols="12"
                      sm="4"
                    >
                    <v-card
                    :loading="loading"
                    class="mx-auto my-12"
                    max-width="374"
                  >
                    <template slot="progress">
                      <v-progress-linear
                        color="deep-purple"
                        height="10"
                        indeterminate
                      ></v-progress-linear>
                    </template>
                
                    <v-img
                      height="250"
                      src="images/smallbanner.png"
                    ></v-img>
                    <v-divider class="mx-4"></v-divider>
                    <v-card-title
                     style="font:bold"
                    >宠物商店后台系统</v-card-title>
                    <v-container>
                      <v-row>
                        <v-col
                          cols="12"
                          sm="12"
                          md="12"
                        >
                          <v-text-field
                            label="UserName"
                            required
                          ></v-text-field>
                        </v-col>
                        <v-col cols="12">
                          <v-text-field
                            label="Password*"
                            type="password"
                            required
                          ></v-text-field>
                        </v-col>
                      </v-row>
                    </v-container>
                    
                
                    <v-divider class="mx-4"></v-divider>
                
                    <v-card-title>Welcome!</v-card-title>
                
                   
                    <v-card-actions>
                      <a href="pages/商品管理.html">
                      <v-btn
                        color="deep-purple lighten-2"
                        text
                        @click="reserve"
                      >
                        登录
                      </v-btn></a>
                      <v-spacer></v-spacer>
                      <v-btn
                        color="deep-purple lighten-2"
                        text
                        @click="reserve"
                      >
                        注册
                      </v-btn>
                    </v-card-actions>
                  </v-card>
                    </v-col>
                  </v-row>

                    </v-row>
                  </template>
            </v-parallax>
            </template>
        </v-main>

        <!-- 主页帮助对话框  helpdialog-->
        <v-dialog
        v-model="helpDialog"
        width="600px"
      >
        <v-card>
          <v-card-title>
            <span class="text-h5">Help</span>
          </v-card-title>
          <v-card-text>
            Lorem ipsum dolor sit amet, semper quis, sapien id natoque elit. Nostra urna at, magna at neque sed sed ante imperdiet, dolor 
            mauris cursus velit, velit non, sem nec. Volutpat sem ridiculus placerat leo, augue in, duis erat proin condimentum in a eget, sed fermentum sed vestibulum varius ac, 
            vestibulum volutpat orci ut elit eget tortor. Ultrices nascetur nulla gravida ante arcu. Pharetra rhoncus morbi ipsum, nunc tempor debitis, ipsum pellentesque, vitae id quam ut mauris dui tempor, aptent non. 
            Quisque turpis. Phasellus quis lectus luctus orci eget rhoncus.
            Amet donec vestibulum mattis commodo, nulla aliquet, nibh praesent, elementum nulla. Sit lacus pharetra tempus magna neque pellentesque, nulla vel erat.
            Justo ex quisque nulla accusamus venenatis, sed quis. Nibh phasellus gravida metus in, fusce aenean ut erat commodo eros. Ut turpis, dui integer, nonummy pede placeat nec in sit leo. 
            Faucibus porttitor illo taciti odio, amet viverra scelerisque quis quis et tortor, curabitur morbi a. Enim tempor at, rutrum elit condimentum, amet rutrum vitae tempor torquent nunc. 
            Praesent vestibulum integer maxime felis. Neque aenean quia vitae nostra, tempus elit enim id dui, at egestas pulvinar. Integer libero vestibulum, quis blandit scelerisque mattis fermentum
             nulla, tortor donec vestibulum dolor amet eget, elit nullam. Aliquam leo phasellus aliquam curabitur metus a, nulla justo mattis duis interdum vel, mollis vitae et id, vestibulum erat ridiculus 
             sit pulvinar justo sed. Vehicula convallis, et nulla wisi, amet vestibulum risus, quam ac egestas.
            
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              color="green darken-1"
              text
              @click="helpDialog = false"
            >
              Disagree
            </v-btn>
            <v-btn
              color="green darken-1"
              text
              @click="helpDialog = false"
            >
              Agree
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
        <!-- 页脚 -->
        <v-footer padless>
          <v-col class="text-center" cols="12">
            {{ new Date().getFullYear() }} — <strong>MyPetstoreForMerchant</strong>
          </v-col>
        </v-footer>
        
      </v-app>
    </template>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script src="js/axios-0.18.0.js"></script>
  <script src="js/index.js"></script>
</body>
</html>